<script setup>

import dataPermissionService from "@/service/impl/DataPermissionService.js"
import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {log} from "@/util/Log.js";
import {message, t} from "@/service/index.js";
import DataPermissionModel from "@/model/DataPermissionModel.js";


const data = dataJson()
const module = moduleJson()
const dataPermission = ref(new DataPermissionModel())
const tableWhere = ref({
    tables: [],
    fields: [],
})
const conditions = ref("")
const select = ref(null)
const input = ref(null)
const roles = ref([])

const onCreate = () => {
    module.value.init(dataPermissionService.url.editDataPermissions, dataPermissionService.url.editDataPermissions,
        dataPermissionService.url.delDataPermissions, null, null)
    module.value.operations.width = "300px"
    init()
}

const init = () => {
    dataPermissionService.findDataPermissions(data.value.source()).then(res => {
        data.value.init(res)
    }).catch(e => {
        log.info(e)
    })
}

const editOpen = (data, index, type) => {
    dataPermissionService.findByTables({}).then(res => {
        tableWhere.value.tables = res.data.tables
        roles.value = res.data.roles
    })
    let fun = {
        0: () => dataPermission.value = new DataPermissionModel(),
        1: () => {
            Object.assign(dataPermission.value, data)
            findFields()
        }
    }
    fun[type]()
    module.value.dialog.load = false
}

const findFields = () => {
    if(!dataPermission.value.tableName){
        return
    }
    dataPermissionService.findByFields({
        tableName: dataPermission.value.tableName
    }).then(res => {
        tableWhere.value.fields = res.data
    })
}

const showFields = (str) => {
    if(str.charAt(str.length - 1) !== '@'){
        return
    }
    // 让 el-select 获取焦点并显示选项
    nextTick(() => {
        select.value.toggleMenu()
        select.value.focus()
    })
}

const sureFields = (str) => {
    dataPermission.value.conditions = dataPermission.value.conditions.substring(0, dataPermission.value.conditions.length - 1)
    dataPermission.value.conditions += `{table}.${str} `
    nextTick(() => {
        input.value.focus()
        conditions.value = null
    })
}

const editConfirm = (type) => {
    const d = Object.assign({}, dataPermission.value)
    delete d.rules
    dataPermissionService.editDataPermissions(d).then(res => {
        message.success(t("btn.success"))
        data.value.load = true
        init()
        module.value.dialog.show = false
    })
}

const del = (d) => {
    dataPermissionService.delDataPermissions(d).then(res => {
        message.success(t("btn.success"))
        data.value.load = true
        init()
    })
}


</script>
<template>
    <Page
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="del"
        @refresh="init"
        @pageSizeChange="(size) => data.pageSizeChange(size,init)"
        @pageCurrentChange="(current) =>data.pageCurrentChange(current,init)"
        @onShow="init"
        @onCreate="onCreate"
    >
        <!-- 定义表格中的列有哪些 -->
        <template #table-column>
            <el-table-column prop="tableName" width="230px" :label="$t('dataPermission.tableName')"/>
            <el-table-column prop="conditions" :label="$t('dataPermission.conditions')"/>
        </template>
        <!-- 当表格中的操作按钮没有你需要的时候可以额外再table-event中扩展 -->
        <template #after-table-event="row">

        </template>
        <!-- 定义详情、添加、编辑弹出层中的字段和数据 -->
        <template #table-dialog>
            <el-form :rules="dataPermission.rules" :model="dataPermission" :label-width="100" :label-position="'left'"
                     style="width: 100%;padding: 5px">
                <el-form-item :label="$t('dataPermission.tableName')" prop="tableName">
                    <el-select v-model="dataPermission.tableName" filterable clearable @change="findFields">
                        <el-option
                            v-for="item in tableWhere.tables"
                            :key="item.tableName"
                            :label="`${item.tableName} (${item.tableComment})`"
                            :value="item.tableName"
                        >
                            <span style="float: left">{{ item.tableName }}</span>
                            <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.tableComment }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('dataPermission.conditions')">
                    <el-input v-model="dataPermission.conditions" @input="showFields" ref="input" clearable/>
                    <el-select v-model="conditions"
                               style="position: absolute;opacity: 0; pointer-events: none;" ref="select"
                               @change="sureFields"
                    >
                        <el-option
                            v-for="item in tableWhere.fields"
                            :key="item.columnName"
                            :label="`${item.columnComment} (${item.columnName})`"
                            :value="item.columnName"
                        >
                            <span style="float: left">{{ item.columnName }}</span>
                            <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
                                {{ item.columnComment }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('dataPermission.role')">
                    <el-select
                        v-model="dataPermission.roleId" placeholder="" multiple clearable
                    >
                        <el-option
                            v-for="item in roles"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <!-- 搜索 -->
        <template #table-search>

        </template>
    </Page>
</template>

<style lang="scss" scoped>

</style>
